<template>
  <div class="right-slider" id="right-slider">
    <!-- 特殊部分处理 -->
    <div
      class="right-slider-special"
      v-if="
        FilmReadRight.findingVisible ||
        FilmReadRight.diagnosisVisible ||
        FilmReadRight.rejectFilmVisible
      "
    >
      <!-- 废片模块 -->
      <!-- // discarded -->
      <div v-if="FilmReadRight.rejectFilmVisible" class="right-slider-special-film">
        <div class="right-slider-special-title reject-title">当前序列被标为废片</div>
        <div class="right-slider-special-text reject-content">
          <!-- discardReason + discardCode -->
          原因：{{ FilmReadRight.rejectFilmValue }}
        </div>
      </div>
      <!-- 检查所见模块 -->
      <div v-if="FilmReadRight.findingVisible" class="right-slider-special-item">
        <div class="right-slider-special-title">检查所见：</div>
        <div class="right-slider-special-text">{{ FilmReadRight.findingValue }}</div>
      </div>
      <!-- 诊断所得模块 -->
      <div
        v-if="FilmReadRight.diagnosisVisible"
        class="right-slider-special-item"
        :style="{ marginTop: FilmReadRight.findingVisible ? '16px' : '0px' }"
      >
        <div class="right-slider-special-title">诊断所得：</div>
        <div class="right-slider-special-text">{{ FilmReadRight.diagnosisValue }}</div>
      </div>
    </div>
    <!-- 序列征象处理（大征象） -->
    <div :data-key="FilmReadRight.seriesSettings.formId" class="right-slider-list" v-show="FilmReadRight.currentSubmenuItem === ''">
      <!-- <div v-for="(value, name, index) in seriesSettings"> -->
      <div class="right-slider-list-title">序列征象</div>
      <div class="right-slider-list-content">
        <a-form
          :model="FilmReadRight.seriesSettings.form"
          :ref="(el: refType) => setRefMap(el, 1)"
          label-align="left"
        >
          <div v-for="t in FilmReadRight.seriesSettings?.formOptions" :key="t?.id">
            <a-form-item
              class="mjor-sign-input"
              v-if="t?.type === 'text'"
              :label="t?.title"
              :field="t?.field"
              :required="t?.required"
              :rules="[ {required: t?.required, message:`${t?.title}不能为空！`}]"
            >
              <template #label>
                <a-tooltip :content="t?.title" position="bottom">
                  <span>{{ t?.title }}</span>
                </a-tooltip>
              </template>
              <a-textarea
                v-model="FilmReadRight.seriesSettings.form[String(t?.field)]"
                :disabled="disabled"
                @input="handleChange($event, FilmReadRight.seriesSettings, 1, t)"
                @focus="handleFocus"
                @blur="handleBlur"
              />
            </a-form-item>
            <a-form-item
              class="mjor-sign-select"
              v-if="t?.type === 'select'"
              :label="t?.title"
              :field="t?.field"
              :rules="[ {required: t?.required, message:`${t?.title}不能为空！`}]"
              :required="t?.required"
            >
              <template #label>
                <a-tooltip :content="t?.title" position="bottom">
                  <span>{{ t?.title }}</span>
                </a-tooltip>
              </template>
              <a-select
                placeholder="请选择"
                allow-clear
                v-model="FilmReadRight.seriesSettings.form[String(t?.field)]"
                :disabled="disabled"
                @change="handleChange($event, FilmReadRight.seriesSettings, 1, t)"
              >
                <a-option v-for="it in t?.data" :key="it?.value" :value="it?.value">{{
                  it?.label
                }}</a-option>
              </a-select>
            </a-form-item>
            <a-form-item
              class="mjor-sign-cascader"
              v-if="t?.type === 'child_select'"
              :label="t?.title"
              :field="t?.field"
              :rules="[ {required: t?.required, message:`${t?.title}不能为空！`}]"
              :required="t?.required"
            >
              <template #label>
                <a-tooltip :content="t?.title" position="bottom">
                  <span>{{ t?.title }}</span>
                </a-tooltip>
              </template>
              <a-cascader
                v-model="FilmReadRight.seriesSettings.form[String(t?.field)]"
                path-mode
                :options="t?.data"
                :disabled="disabled"
                placeholder="请选择"
                allow-clear
                @change="handleChange($event, FilmReadRight.seriesSettings, 1, t)"
              />
            </a-form-item>
            <a-form-item
              class="mjor-sign-radio"
              v-if="t?.type === 'radiobox'"
              :label="t?.title"
              :field="t?.field"
              :rules="[ {required: t?.required, message:`${t?.title}不能为空！`}]"
              :required="t?.required"
            >
              <template #label>
                <a-tooltip :content="t?.title" position="bottom">
                  <span>{{ t?.title }}</span>
                </a-tooltip>
              </template>
              <a-radio-group
                v-model="FilmReadRight.seriesSettings.form[String(t?.field)]"
                :disabled="disabled"
                @change="handleChange($event, FilmReadRight.seriesSettings, 1, t)"
              >
                <a-grid :cols="3" :colGap="24" :rowGap="16">
                  <a-grid-item v-for="it in t?.data" :key="it?.value">
                    <a-radio :value="it?.value">{{ it?.label }}</a-radio>
                  </a-grid-item>
                </a-grid>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              class="mjor-sign-checkbox"
              v-if="t?.type === 'checkbox'"
              :label="t?.title"
              :field="t?.field"
              :required="t?.required"
              :rules="[ {required: t?.required, message:`${t?.title}不能为空！`}]"
            >
              <template #label>
                <a-tooltip :content="t?.title" position="bottom">
                  <span>{{ t?.title }}</span>
                </a-tooltip>
              </template>
              <a-checkbox-group
                v-model="FilmReadRight.seriesSettings.form[String(t?.field)]"
                :disabled="disabled"
                @change="handleChange($event, FilmReadRight.seriesSettings, 1, t)"
              >
                <a-grid :cols="3" :colGap="24" :rowGap="16">
                  <a-grid-item v-for="it in t?.data" :key="it?.value">
                    <a-checkbox :value="it?.value">{{ it?.label }}</a-checkbox>
                  </a-grid-item>
                </a-grid>
              </a-checkbox-group>
            </a-form-item>
          </div>
        </a-form>
      </div>
      <!-- </div> -->
    </div>
    <!-- 标注征象处理（小征象） -->
    <div :data-key="FilmReadRight.currentMiniSeriesSet.formId" class="right-slider-list" v-show="FilmReadRight.currentSubmenuItem !== ''">
      <!-- <div v-for="item in currentMiniSeriesSet"> -->
      <div class="right-slider-list-title">标注征象</div>
      <div class="right-slider-list-content">
        <a-form
          :model="FilmReadRight.currentMiniSeriesSet.form"
          :ref="(el: refType) => setRefMap(el, 2)"
          :id="FilmReadRight.currentSubmenuItem"
          label-align="left"
        >
          <div v-for="t in FilmReadRight.currentMiniSeriesSet?.formOptions" :key="t?.id">
            <a-form-item
              class="mjor-sign-input"
              v-if="t?.type === 'text'"
              :label="t?.title"
              :field="t?.field"
              :required="t?.required"
              :rules="[ {required: t?.required, message:`${t?.title}不能为空！`}]"
            >
              <template #label>
                <a-tooltip :content="t?.title" position="bottom">
                  <span>{{ t?.title }}</span>
                </a-tooltip>
              </template>
              <a-textarea
                v-model="FilmReadRight.currentMiniSeriesSet.form[String(t?.field)]"
                :disabled="disabled"
                @input="handleChange($event, FilmReadRight.currentMiniSeriesSet, 2, t)"
                @focus="handleFocus"
                @blur="handleBlur"
              />
            </a-form-item>

            <a-form-item
              class="mjor-sign-select"
              v-if="t?.type === 'select'"
              :label="t?.title"
              :field="t?.field"
              :required="t?.required"
              :rules="[ {required: t?.required, message:`${t?.title}不能为空！`}]"
            >
              <template #label>
                <a-tooltip :content="t?.title" position="bottom">
                  <span>{{ t?.title }}</span>
                </a-tooltip>
              </template>
              <a-select
                placeholder="请选择"
                allow-clear
                v-model="FilmReadRight.currentMiniSeriesSet.form[String(t?.field)]"
                :disabled="disabled"
                @change="handleChange($event, FilmReadRight.currentMiniSeriesSet, 2, t)"
              >
                <a-option v-for="it in t?.data" :key="it?.value">{{
                  it?.label
                }}</a-option>
              </a-select>
            </a-form-item>
            <a-form-item
              class="mjor-sign-cascader"
              v-if="t?.type === 'child_select'"
              :label="t?.title"
              :field="t?.field"
              :required="t?.required"
              :rules="[ {required: t?.required, message:`${t?.title}不能为空！`}]"
            >
              <template #label>
                <a-tooltip :content="t?.title" position="bottom">
                  <span>{{ t?.title }}</span>
                </a-tooltip>
              </template>
              <a-cascader
                v-model="FilmReadRight.currentMiniSeriesSet.form[String(t?.field)]"
                path-mode
                :options="t?.data"
                :disabled="disabled"
                placeholder="请选择"
                allow-clear
                @change="handleChange($event, FilmReadRight.currentMiniSeriesSet, 2, t)"
              />
            </a-form-item>
            <a-form-item
              class="mjor-sign-radio"
              v-if="t?.type === 'radiobox'"
              :label="t?.title"
              :field="t?.field"
              :required="t?.required"
              :rules="[ {required: t?.required, message:`${t?.title}不能为空！`}]"
            >
              <template #label>
                <a-tooltip :content="t?.title" position="bottom">
                  <span>{{ t?.title }}</span>
                </a-tooltip>
              </template>
              <a-radio-group
                v-model="FilmReadRight.currentMiniSeriesSet.form[String(t?.field)]"
                :disabled="disabled"
                @change="handleChange($event, FilmReadRight.currentMiniSeriesSet, 2, t)"
              >
                <a-grid :cols="3" :colGap="24" :rowGap="16">
                  <a-grid-item v-for="it in t?.data" :key="it?.value">
                    <a-radio :value="it?.value">{{ it?.label }}</a-radio>
                  </a-grid-item>
                </a-grid>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              class="mjor-sign-checkbox"
              v-if="t?.type === 'checkbox'"
              :label="t?.title"
              :field="t?.field"
              :required="t?.required"
              :rules="[ {required: t?.required, message:`${t?.title}不能为空！`}]"
            >
              <template #label>
                <a-tooltip :content="t?.title" position="bottom">
                  <span>{{ t?.title }}</span>
                </a-tooltip>
              </template>
              <a-checkbox-group
                v-model="FilmReadRight.currentMiniSeriesSet.form[String(t?.field)]"
                :disabled="disabled"
                @change="handleChange($event, FilmReadRight.currentMiniSeriesSet, 2, t)"
              >
                <a-grid :cols="3" :colGap="24" :rowGap="16">
                  <a-grid-item v-for="it in t?.data" :key="it?.value">
                    <a-checkbox :value="it?.value">{{ it?.label }}</a-checkbox>
                  </a-grid-item>
                </a-grid>
              </a-checkbox-group>
            </a-form-item>
          </div>
        </a-form>
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { Ref, ComponentPublicInstance } from 'vue';
import * as Store from "@/store";
import usePageRight from "./hooks/usePageRight";
type refType = Element | ComponentPublicInstance | null;
const FilmReadRight = Store.useFilmReadRight();
const { handleChange, handleBlur, handleFocus } = usePageRight();
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: "",
  },
  formRef: {
    type: Object,
    default: {}
  }
});
// const refMap: Record<string, refType> = {}
const setRefMap = (el: refType, type: number) => {
  if (el && type === 1) {
    props.formRef[`${props.formRef.seriesSetClass}`] = el;
  } else {
    props.formRef[`${props.formRef.seriesMinSetClass}`] = el;
  }
}
</script>

<style lang="less" scoped>
.right-slider {
  width: 300px;
  height: calc(100vh - 108px);
  background-color: #18252f;
  overflow: hidden;
  // background: linear-gradient(180deg, #0c1a21 0%, #192c38 100%);
  .arco-radio-group{
    width: 100%;
  }
  &-special {
    padding: 12px 12px 16px;
    border-bottom: 1px solid #000;
    &-title {
      font-family: "Microsoft YaHei";
      font-style: normal;
      font-weight: 700;
      font-size: 14px;
      color: #ccc;
      margin-bottom: 4px;
    }
    &-text {
      font-family: "Microsoft YaHei";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      color: #ccc;
    }
    .reject-title {
      font-family: "Microsoft YaHei";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 18px;
      margin-bottom: 8px;
      color: #faad14;
    }
    .reject-content {
      font-family: "Microsoft YaHei";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 18px;
      color: #faad14;
    }
  }
  &-list {
    // padding: 20px 0px;
    padding-bottom: 12px;
    &-title {
      font-family: "Microsoft YaHei";
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      color: #fff;
      padding-left: 12px;
    }
    &-content {
      font-family: "Microsoft YaHei";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      color: #ccc;
      padding-top: 16px;
      overflow-y: auto;
      height: calc(100vh - 146px);
      .mjor-sign-input,
      .mjor-sign-select,
      .mjor-sign-cascader,
      .mjor-sign-radio,
      .mjor-sign-checkbox {
        display: block;
        margin-bottom: 0px;
        padding: 12px 12px 12px;
        border-bottom: 1px solid #000;
        :deep(.arco-form-item-label-col) {
          line-height: normal;
          .arco-form-item-label {
            font-family: "Microsoft YaHei";
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            color: #ccc;
            margin-bottom: 8px;
            white-space: nowrap;
            width: 250px;
            min-width: 250px;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        :deep(.arco-form-item-wrapper-col) {
          width: 100%;
          .arco-textarea-wrapper,
          .arco-select-view-single {
            background-color: transparent;
            border: 1px solid rgba(255, 255, 255, 0.7);
            border-radius: 4px;
            color: #fff;
            .arco-select-view-suffix {
              color: #fff;
            }
          }
          .arco-select-view-single:hover {
            .arco-select-view-icon {
              color: #fff;
            }
          }
          .arco-grid {
            gap: 16px 0px !important;
            // grid-template-columns: repeat(3, minmax(0px, 1fr));
            grid-template-columns: repeat(2, 50%) !important;
          }
          .arco-radio-label,
          .arco-checkbox-label {
            color: #ccc;
          }
          .arco-checkbox-group {
            width: 100%;
          }
        }
        :deep(.arco-checkbox-icon) {
          background-color: transparent;
          border: 1px solid #ccc;
        }
        :deep(.arco-checkbox-checked) {
          .arco-checkbox-icon {
            background-color: #67c9d5;
          }
        }
        :deep(.arco-icon-hover:hover::before) {
          background-color: transparent;
        }
        :deep(.arco-icon-hover:hover) {
          .arco-checkbox-icon {
            border: 1px solid #67c9d5;
          }
        }
        :deep(.arco-checkbox:hover) {
          .arco-checkbox-icon-hover::before {
            background-color: transparent;
          }
        }
      }
      .mjor-sign-input {
        :deep(.arco-form-item-wrapper-col) {
          .arco-form-item-content {
            min-height: 64px;
            .arco-textarea-wrapper {
              padding: 0;
              .arco-textarea {
                min-height: 64px;
              }
            }
          }
        }
      }
      :deep(.arco-form) {
        .arco-radio-icon {
          width: 12px;
          height: 12px;
          line-height: 12px;
          border: 1px solid rgba(255, 255, 255, 0.7);
        }
        .arco-radio-icon::after {
          background-color: transparent;
        }
        .arco-radio:hover .arco-radio-icon {
          border-color: #67c9d5;
        }
        .arco-radio:hover .arco-radio-icon-hover::before {
          background-color: transparent;
        }
        .arco-radio-checked .arco-radio-icon {
          border: 1px solid #67c9d5;
          background-color: transparent;
        }
        .arco-radio-checked .arco-radio-icon::after {
          background-color: #67c9d5;
        }
      }
    }
  }
  &-list > div {
    padding-top: 12px;
  }
}
</style>
